<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/head.css">
		<link rel="stylesheet" href="../css/team.css">
		<style>
			ul,
			ol {
				list-style: none;
			}

			a {
				text-decoration: none;
			}

			.img-change .popwin-main .con {
				overflow: initial;
				max-height: 600px;
				padding: 15px 20px 6px;
			}

			* {
				margin: 0;
				padding: 0;
			}

			.hide {
				display: none ;
			}
			.show{
				display: block ;
			}

			.img-change .popwin-main .con {
				overflow: initial;
				max-height: 600px;
				padding: 15px 20px 6px;
			}

			.img-change .news-group {
				margin-bottom: 10px;
			}

			.img-change {
				position: absolute;
				top: 0;
				width: 100%;
				background-color: rgba(0, 0, 0, 0.5);
				height: 100%;
			}

			.img-change .imgbox {
				width: 48.8%;
				border-radius: 5px;
				overflow: hidden;
				margin: 20% auto;
				background-color: #fff;
				z-index: 100;

			}

			.img-change .imgbox .imgbox-right {
				width: 27%;
				line-height: 30px;
			}

			.img-change .imgbox .imgbox-right .title {
				background-color: #EFCBBE;
				width: 75%;
				text-align: center;
				font-weight: bold;
				margin: 60px 0 20px 0;
				padding: 4px 0;
			}

			.img-change .imgbox .imgbox-right span:last-child {
				width: 81%;
			}

			.img-change .imgbox .imgbox-right span:first-child {
				font-weight: bold;
			}

			.img-change .imgbox-bottom {
				margin: 20px;
				box-sizing: border-box;
			}

			.img-change .imgbox-bottom img {
				height: 350px;
			}

			.img-change .imgbox-bottom .next {
				background-color: #EFCBBE;
				text-align: center;
				font-weight: bold;
				width: 18%;
				height: 30px;
				line-height: 30px;
				border-radius: 10px;
				position: relative;
				top: 320px;
			}

			.img-change .page-control .page-con {
				float: right;
			}

			.img-change .page-control ul {
				float: left;
				height: 34px;
			}

			.img-change .page-control .i-prev {
				cursor: pointer;
				display: block;
				float: left;
				width: 24px;
				height: 24px;
				background: url(images/i-prev1.png) no-repeat center center;
				background-size: 8px 13px;
			}

			.img-change .page-control .i-prev.disable {
				background: url(images/i-prev2.png) no-repeat center center;
			}

			.img-change .page-control .i-next {
				cursor: pointer;
				display: block;
				float: left;
				width: 24px;
				height: 24px;
				background: url(images/i-next1.png) no-repeat center center;
				background-size: 8px 13px;
			}

			.img-change .page-control .i-next.disable {
				background: url(images/i-next2.png) no-repeat center center;
			}

			.img-change .page-control ul li {
				cursor: pointer;
				width: 24px;
				float: left;
				margin-right: 2px;
				font-size: 12px;
				color: #999;
				height: 24px;
				background: none;
				border-radius: 2px;
				text-align: center;
				line-height: 24px;
			}

			.img-change .page-control li.active,
			.img-news-pop .page-control li:hover {
				background: #F6F6F6;
				color: #666666;
				font-weight: bold;
			}

			.img-change .btn-know {
				cursor: pointer;
				width: 81px;
				border: none;
				height: 32px;
				background: #3197FF;
				border-radius: 4px;
			}
			
		</style>
	</head>
	<body>

		<script src="../js/jquery.js"></script>
		<script>
			$(function() {
				
				var listindex = $('.team-cont dl').length
				alert(listindex)
				
				$('.img-change').addClass('hide')
				$('.img-change .imgbox-top img').on('click',function(){
					$('.img-change').toggleClass('show')
				})
				$('.teamcont-list dl').on('click',function(){
					$('.img-change').addClass('show')
				})
				
				
				pageControl('#img-change')
				// 切换消息页面
				function pageControl(id) {
					// 箭头的展示
					function arrowShow() {
						if (currentIndex === pageLength - 1) {
							$('.i-prev').removeClass('disable')
							$('.i-next').addClass('disable')
						} else if (currentIndex === 0) {
							$('.i-prev').addClass('disable')
							$('.i-next').removeClass('disable')
						} else if (0 < currentIndex < pageLength - 1) {
							$('.i-prev').removeClass('disable')
							$('.i-next').removeClass('disable')
						}
					}
					var newsLi = $(id + ' .news-group li')
					var pageLi = $(id + ' .page-control li')
					var pageLength = pageLi.length
					var currentIndex = $(id + ' .page-control li.active').index()
					if (currentIndex === 0) {
						$('.i-prev').addClass('disable')
					}
					pageLi.on('click', function() {
						var index = $(this).index()
						$(this).addClass('active').siblings().removeClass('active')
						newsLi.eq(index).removeClass('hide').siblings().addClass('hide')
						currentIndex = index
						arrowShow()
					})
					// 上一张
					$('.i-prev').on('click', function() {
						if (currentIndex !== 0) {
							var prevIndex = currentIndex - 1
							pageLi.eq(prevIndex).addClass('active').siblings().removeClass('active')
							newsLi.eq(prevIndex).removeClass('hide').siblings().addClass('hide')
							currentIndex = prevIndex
							arrowShow()
						}
					})
					// 下一张
					$('.i-next').on('click', function() {
						if (currentIndex !== pageLength - 1) {
							var nextIndex = currentIndex + 1
							pageLi.eq(nextIndex).addClass('active').siblings().removeClass('active')
							newsLi.eq(nextIndex).removeClass('hide').siblings().addClass('hide')
							currentIndex = nextIndex
							arrowShow()
						}
					})
				}

			})
		</script>


		<div class="team">
			<div class="head-bg">
				<div class="head flex com-center pc-nav">
					<img src="../img/643a7d41a68980e30fd1eddb0d45e6a.png" width="25%" alt="loge">
					<ul class="flex">
						<li><a href="../index/index.html">首页</a></li>
						<li><a href="../company/company.html">公司简介</a></li>
						<li><a href="../project/project.html">我们的项目</a></li>
						<li><a href="../inst/inst.html">我们的仪器</a></li>
						<li><a href="../adv/adv.html">我们的优势</a></li>
						<li><a href="#" class="hover">医师团队</a></li>
					</ul>
					<div style="position: relative;"><input type="text" width="100%">
						<img src="../img/search.png" width="20px"
							style="display: inline-block;position: absolute;top: 58%;right: 10px;" alt="">
					</div>
				</div>
				<div class="phone-nav com-center flex">
					<img src="../img/643a7d41a68980e30fd1eddb0d45e6a.png" width="50%" alt="loge">
					<img src="../img/phonenav.png" width="70px"
						style="margin: 20px;box-sizing: border-box;position: absolute;right: 0;" alt="">
				</div>
			</div>
			<!--/head-bg-->
			<div class="cont-rgba">
				<div class="team-cont com-center">
					<div class="flex" style="justify-content: left;">
						<img src="../img/com2 (2).png" />
						<div class="title">我们的医师</div>
						<img src="../img/com2 (1).png" />
					</div>
					<div class="teamcont-list flex">
						<!--1-->
						<dl>
							<dt>
								<img src="../img/1.jpg" alt="">
								<span>预约</span>
							</dt>
							<dd>
								<p><span>职称</span>:院长</p>
								<p class="flex"><span class="span">擅长</span>:<span>自体脂肠 注射丰胸 吸脂减肥</span></p>
							</dd>
						</dl>
						<!--2-->
						<dl>
							<dt>
								<img src="../img/2.jpg" alt="">
								<span>预约</span>
							</dt>
							<dd>
								<p><span>职称</span>:主任</p>
								<p class="flex"><span>擅长</span>:<span class="span">注射美容 除皱美容 鼻部整形双眼皮<br />颜面提升术
										自体脂肪面部年轻化</span></p>
							</dd>
						</dl>
						<!--3-->
						<dl>
							<dt>
								<img src="../img/3.jpg" alt="">
								<span>预约</span>
							</dt>
							<dd>
								<p><span>职称</span>:医生</p>
								<p class="flex">
									<span>擅长</span>:
									<span class="span">
										牙齿矫正 烤瓷牙<br />
										种植牙 美容冠<br />
										牙齿美白 口唇整形
										龅牙矫正
									</span>
								</p>
							</dd>
						</dl>
						<!--4-->
						<dl>
							<dt>
								<img src="../img/4.jpg" height="290px" alt="">
								<span>预约</span>
							</dt>
							<dd>
								<p><span>职称</span>:医生</p>
								<p class="flex">
									<span>擅长</span>:
									<span class="span">
										光子嫩肤 激光去痣
										激光祛斑 激光脱毛
										激光祛痘 激光美白
									</span>
								</p>

							</dd>
						</dl>

					</div>
					<!--list2-->
					<div class="teamcont-list flex">
						<!--5-->
						<dl>
							<dt>
								<img src="../img/5.jpg" alt="">
								<span>预约</span>
							</dt>
							<dd>
								<p><span>职称</span>:医生</p>
								<p class="flex"><span class="span">擅长</span>:<span>面部整形 鼻部整形 眼部整形 注射美容</span></p>
							</dd>
						</dl>
						<!--6-->
						<dl>
							<dt>
								<img src="../img/6.jpg" alt="">
								<span>预约</span>
							</dt>
							<dd>
								<p><span>职称</span>:主任</p>
								<p class="flex"><span>擅长</span>:<span class="span">去疤痕 去剖腹产疤痕 去烧伤疤痕 畸形疤痕修复 烧伤疤痕修复 去血管瘤
										体表小肿瘤切除术 眼部整形</span></p>
							</dd>
						</dl>
						<!--7-->
						<dl>
							<dt>
								<img src="../img/7.jpg" height="300px" alt="">
								<span>预约</span>
							</dt>
							<dd>
								<p><span>职称</span>:医生</p>
								<p class="flex">
									<span>擅长</span>:
									<span class="span">
										瘦脸除皱瘦脸 注射 玻尿酸 微创除皱<br />
										眼部整形 注射隆鼻
									</span>
								</p>
							</dd>
						</dl>
						<!--8-->
						<dl>
							<dt>
								<img src="../img/8.jpg" alt="">
								<span>预约</span>
							</dt>
							<dd>
								<p><span>职称</span>:医生</p>
								<p class="flex">
									<span>擅长</span>:
									<span class="span">
										面部年轻化 胸部整形吸脂减肥 鼻部整形 眼部整形
									</span>
								</p>

							</dd>
						</dl>

					</div>
					<!--list3-->
					<div class="teamcont-list flex">
						<!--9-->
						<dl>
							<dt>
								<img src="../img/2788002.jpg" height="290px" alt="">
								<span>预约</span>
							</dt>
							<dd>
								<p><span>职称</span>:主任</p>
								<p class="flex"><span class="span">擅长</span>:<span>
										胸部整形 假体隆胸
										乳房再造 面部年轻化
										细微脂肪移植术<br />
										鼻部整形 眼部整形
										唇腭裂修复 去血管瘤</span></p>
							</dd>
						</dl>
						<!--10-->
						<dl>
							<dt>
								<img src="../img/2877894.jpg" alt="">
								<span>预约</span>
							</dt>
							<dd>
								<p><span>职称</span>:主任</p>
								<p class="flex"><span>擅长</span>:<span class="span">
										注射除皱 祛痤疮<br />
										激光祛斑 去鲜红斑痣
										激光祛雀斑 祛老年斑
										祛日晒斑 祛黄褐斑
										祛斑C9综合净斑<br />
										激光祛胎记
									</span></p>
							</dd>
						</dl>
						<!--11-->
						<dl>
							<dt>
								<img src="../img/3262091.jpg" height="290px" alt="">
								<span>预约</span>
							</dt>
							<dd>
								<p><span>职称</span>:医生</p>
								<p class="flex">
									<span>擅长</span>:
									<span class="span">
										双眼皮 颜面提升术
										面部年轻化 中面部
										除皱术 耳软骨隆鼻
										自体肋骨隆鼻<br />
										耳朵畸形再造术<br />
										鼻畸形矫正
									</span>
								</p>
							</dd>
						</dl>
						<!--12-->
						<dl>
							<dt>
								<img src="../img/3554642.jpg" height="290px" alt="">
								<span>预约</span>
							</dt>
							<dd>
								<p><span>职称</span>:医生</p>
								<p class="flex">
									<span>擅长</span>:
									<span class="span">
										头发种植 眉毛种植
										胡须种植 发际线种植
										头发移植 眉毛移植
										睫毛种植植眉
									</span>
								</p>

							</dd>
						</dl>

					</div>
					<!--/list-->
				</div>
				<!--/cont-->
				<!--多弹窗切换效果-->
				<div id="img-change" class="img-change">
					<div class="con">
						<ul class="news-group">
							<!--1-->
							<li class="news-item">
								<div class="imgbox">
									<div class="imgbox-top">
										<img src="../img/teamclose.png" width="100%" alt="">
									</div>
									<div class="imgbox-bottom flex">
										<div class="imgbox-left">
											<img src="../img/1.jpg" alt="">
										</div>
										<div class="imgbox-right">
											<div class="title">
												确认专家
											</div>
											<p><span>职称</span>:<span>院长</span></p>
											<p class="flex"><span class="span">擅长</span>:<span>自体脂肠 注射丰胸 吸脂减肥</span></p>
										</div>
										<div class="next">
											<i class="i-next">
												下一位专家
											</i>
										</div>
									</div>
								</div>
							</li>
							<!--2-->
							<li class="news-item hide">
								<div class="imgbox">
									<div class="imgbox-top">
										<img src="../img/teamclose.png" width="100%" alt="">
									</div>
									<div class="imgbox-bottom flex">
										<div class="imgbox-left">
											<img src="../img/2.jpg" alt="">
										</div>
										<div class="imgbox-right">
											<div class="title">
												确认专家
											</div>
											<p><span>职称</span>:<span>主任</span></p>
											<p class="flex"><span class="span">擅长</span>:<span>注射美容 除皱美容
													鼻部整形双眼皮<br />颜面提升术 自体脂肪面部年轻化</span></p>
										</div>
										<div class="next">
											<i class="i-next">
												下一位专家
											</i>
										</div>
									</div>
								</div>
							</li>
							<!--3-->
							<li class="news-item hide">
								<div class="imgbox">
									<div class="imgbox-top">
										<img src="../img/teamclose.png" width="100%" alt="">
									</div>
									<div class="imgbox-bottom flex">
										<div class="imgbox-left">
											<img src="../img/3.jpg" alt="">
										</div>
										<div class="imgbox-right">
											<div class="title">
												确认专家
											</div>
											<p><span>职称</span>:<span>医生</span></p>
											<p class="flex"><span class="span">擅长</span>:<span>
													牙齿矫正 烤瓷牙<br />
													种植牙 美容冠<br />
													牙齿美白 口唇整形
													龅牙矫正</span>
											</p>
										</div>
										<div class="next">
											<i class="i-next">
												下一位专家
											</i>
										</div>
									</div>
								</div>
							</li>
							<!--4-->
							<li class="news-item hide">
								<div class="imgbox">
									<div class="imgbox-top">
										<img src="../img/teamclose.png" width="100%" alt="">
									</div>
									<div class="imgbox-bottom flex">
										<div class="imgbox-left">
											<img src="../img/4.jpg" alt="">
										</div>
										<div class="imgbox-right">
											<div class="title">
												确认专家
											</div>
											<p><span>职称</span>:<span>医生</span></p>
											<p class="flex"><span class="span">擅长</span>:<span>
													光子嫩肤 激光去痣
													激光祛斑 激光脱毛
													激光祛痘 激光美白</span>
											</p>
										</div>
										<div class="next">
											<i class="i-next">
												下一位专家
											</i>
										</div>
									</div>
								</div>
							</li>
							<!--5-->
							<li class="news-item hide">
								<div class="imgbox">
									<div class="imgbox-top">
										<img src="../img/teamclose.png" width="100%" alt="">
									</div>
									<div class="imgbox-bottom flex">
										<div class="imgbox-left">
											<img src="../img/5.jpg" alt="">
										</div>
										<div class="imgbox-right">
											<div class="title">
												确认专家
											</div>
											<p><span>职称</span>:<span>医生</span></p>
											<p class="flex"><span class="span">擅长</span>:<span>面部整形 鼻部整形 眼部整形
													注射美容</span></p>
										</div>
										<div class="next">
											<i class="i-next">
												下一位专家
											</i>
										</div>
									</div>
								</div>
							</li>
							<!--6-->
							<li class="news-item hide">
								<div class="imgbox">
									<div class="imgbox-top">
										<img src="../img/teamclose.png" width="100%" alt="">
									</div>
									<div class="imgbox-bottom flex">
										<div class="imgbox-left">
											<img src="../img/6.jpg" alt="">
										</div>
										<div class="imgbox-right">
											<div class="title">
												确认专家
											</div>
											<p><span>职称</span>:<span>主任</span></p>
											<p class="flex"><span class="span">擅长</span>:<span>去疤痕 去剖腹产疤痕 去烧伤疤痕 畸形疤痕修复
													烧伤疤痕修复 去血管瘤
													体表小肿瘤切除术 眼部整形</span></p>
										</div>
										<div class="next">
											<i class="i-next">
												下一位专家
											</i>
										</div>
									</div>
								</div>
							</li>
							<!--7-->
							<li class="news-item hide">
								<div class="imgbox">
									<div class="imgbox-top">
										<img src="../img/teamclose.png" width="100%" alt="">
									</div>
									<div class="imgbox-bottom flex">
										<div class="imgbox-left">
											<img src="../img/7.jpg" alt="">
										</div>
										<div class="imgbox-right">
											<div class="title">
												确认专家
											</div>
											<p><span>职称</span>:<span>医生</span></p>
											<p class="flex"><span class="span">擅长</span>:<span>瘦脸除皱瘦脸 注射 玻尿酸 微创除皱<br />
													眼部整形 注射隆鼻</span></p>
										</div>
										<div class="next">
											<i class="i-next">
												下一位专家
											</i>
										</div>
									</div>
								</div>
							</li>
							<!--8-->
							<li class="news-item hide">
								<div class="imgbox">
									<div class="imgbox-top">
										<img src="../img/teamclose.png" width="100%" alt="">
									</div>
									<div class="imgbox-bottom flex">
										<div class="imgbox-left">
											<img src="../img/8.jpg" alt="">
										</div>
										<div class="imgbox-right">
											<div class="title">
												确认专家
											</div>
											<p><span>职称</span>:<span>医生</span></p>
											<p class="flex"><span class="span">擅长</span>:<span>面部年轻化 胸部整形吸脂减肥 鼻部整形
													眼部整形</span></p>
										</div>
										<div class="next">
											<i class="i-next">
												下一位专家
											</i>
										</div>
									</div>
								</div>
							</li>
							<!--9-->
							<li class="news-item hide">
								<div class="imgbox">
									<div class="imgbox-top">
										<img src="../img/teamclose.png" width="100%" alt="">
									</div>
									<div class="imgbox-bottom flex">
										<div class="imgbox-left">
											<img src="../img/2788002.jpg" alt="">
										</div>
										<div class="imgbox-right">
											<div class="title">
												确认专家
											</div>
											<p><span>职称</span>:<span>主任</span></p>
											<p class="flex"><span class="span">擅长</span>:<span>胸部整形 假体隆胸
													乳房再造 面部年轻化
													细微脂肪移植术<br />
													鼻部整形 眼部整形
													唇腭裂修复 去血管瘤</span></p>
										</div>
										<div class="next">
											<i class="i-next">
												下一位专家
											</i>
										</div>
									</div>
								</div>
							</li>
							<!--10-->
							<li class="news-item hide">
								<div class="imgbox">
									<div class="imgbox-top">
										<img src="../img/teamclose.png" width="100%" alt="">
									</div>
									<div class="imgbox-bottom flex">
										<div class="imgbox-left">
											<img src="../img/2877894.jpg" alt="">
										</div>
										<div class="imgbox-right">
											<div class="title">
												确认专家
											</div>
											<p><span>职称</span>:<span>主任</span></p>
											<p class="flex"><span class="span">擅长</span>:<span>注射除皱 祛痤疮<br />
													激光祛斑 去鲜红斑痣
													激光祛雀斑 祛老年斑
													祛日晒斑 祛黄褐斑
													祛斑C9综合净斑<br />
													激光祛胎记</span></p>
										</div>
										<div class="next">
											<i class="i-next">
												下一位专家
											</i>
										</div>
									</div>
								</div>
							</li>
							<!--11-->
							<li class="news-item hide">
								<div class="imgbox">
									<div class="imgbox-top">
										<img src="../img/teamclose.png" width="100%" alt="">
									</div>
									<div class="imgbox-bottom flex">
										<div class="imgbox-left">
											<img src="../img/3262091.jpg" alt="">
										</div>
										<div class="imgbox-right">
											<div class="title">
												确认专家
											</div>
											<p><span>职称</span>:<span>医生</span></p>
											<p class="flex"><span class="span">擅长</span>:<span>双眼皮 颜面提升术
													面部年轻化 中面部
													除皱术 耳软骨隆鼻
													自体肋骨隆鼻<br />
													耳朵畸形再造术<br />
													鼻畸形矫正</span></p>
										</div>
										<div class="next">
											<i class="i-next">
												下一位专家
											</i>
										</div>
									</div>
								</div>
							</li>
							<!--12-->
							<li class="news-item hide">
								<div class="imgbox">
									<div class="imgbox-top">
										<img src="../img/teamclose.png" width="100%" alt="">
									</div>
									<div class="imgbox-bottom flex">
										<div class="imgbox-left">
											<img src="../img/3554642.jpg" alt="">
										</div>
										<div class="imgbox-right">
											<div class="title">
												确认专家
											</div>
											<p><span>职称</span>:<span>医生</span></p>
											<p class="flex"><span class="span">擅长</span>:<span>头发种植 眉毛种植
													胡须种植 发际线种植
													头发移植 眉毛移植
													睫毛种植植眉</span></p>
										</div>
										<div class="next">
											<i class="i-next">
												下一位专家
											</i>
										</div>
									</div>
								</div>
							</li>
						</ul>
						
					</div>
					<div class="page-control clearfix" style="display: none;">
						<div class="page-con">
							<i class="i-prev"></i>
							<ul class="clearfix">
								<li class="active">1</li>
								<li>2</li>
								<li>3</li>
								<li>4</li>
								<li>5</li>
								<li>6</li>
								<li>7</li>
								<li>8</li>
								<li>9</li>
								<li>10</li>
								<li>11</li>
								<li>12</li>
							</ul>
					
						</div>
					</div>
					<!--/分页器-->
					<!--/内容con-->
				</div>
				<!--/多弹窗切换效果-->
			</div>
			<!--/rgba-->

			<div class="footer-bg">
				<div class="footer flex com-center">
					<div class="footer-left flex-col">
						<div class="title">联系我们</div>
						<p>官网：www.11pic.com</p>
						<p>微信/ 手机：888-88888888</p>
						<p>热线电话：888-88888888</p>
						<p>地址：泰安市天平湖区888号</p>
					</div>
					<div class="footer-center flex-col">
						<img src="../img/footerloge.png" width="100%"
							style="justify-items: center;border:greensolid1px;" alt="">
					</div>
					<div class="footer-right">
						<img src="../img/c9aac203220f45a6ecc2059905babb4.jpg" width="40%"
							style="position: absolute;right: 0;" alt="">
					</div>
				</div>
				<div class="phone-foot com-center">
					<img src="../img/footerloge.png" width="50%" style="margin: 0 auto;display: block;" alt="">
					<div class="title">联系我们</div>
					<div class="phonefoot-cont flex">

						<div>
							<p>官网：www.11pic.com</p>
							<p>微信/ 手机：888-88888888</p>
						</div>
						<div>
							<p>热线电话：888-88888888</p>
							<p>地址：泰安市天平湖区888号</p>
						</div>
						<img src="../img/c9aac203220f45a6ecc2059905babb4.jpg" width="15%" style="margin-top:-10px;"
							alt="">
					</div>
				</div>
			</div>
			<!--/footer-bg-->


		</div>
	</body>
</html>
